<template>
  <div class="index">
    <swiper loop auto :aspect-ratio="170/375" v-model="swiperIndex" @click.native="onIndexChange" :list="adList"></swiper>
    <index-service></index-service>
    <group>
      <cell class="color-white index__activity--cell" is-link>
        <div class="badge-value" @click="gotoMenu('insurance')" slot>
          <span class="vertical-middle">{{ $t('more') }}</span>
        </div>
        <div @click="setListType()" class="common__activity--title common__color--DefaultTheme" slot="title">{{ $t('hotActivity') }}</div>
        <!-- <img slot="icon" width="20" class="common__activity--img" src="~assets/x3/ico/hot.png"> -->

        <img width="20" @click="setListType()" v-show="!listType" slot="icon" class="common__activity--img" src="~assets/x3/ico/icon-lb.png">
        <img width="20" @click="setListType()" v-show="listType" slot="icon" class="common__activity--img" src="~assets/x3/ico/icon-dc.png">
      </cell>
    </group>
    <div v-show="!listType" class="weui-panel weui-panel_access">
      <!---->
      <div class="weui-panel__bd">
        <div v-for="(insure, index) in hotInsuList" :key="index" @click="goDetails(insure)" class="weui-media-box weui-media-box_appmsg">
          <div class="weui-media-box__hd"><img :src="insure.imgUrl" alt="" class="weui-media-box__thumb"></div>
          <div class="weui-media-box__bd">
            <h4 class="weui-media-box__title">
              <div class="cn index__insurance_title">{{insure.productCname}}</div>
              <span class="index__insurance index__insurance--green" :style="riskCodeColor(insure.riskCode)">{{insure.productType}}</span>
            </h4>
            <div class="weui-media-box__desc">{{insure.descrition}}</div>
            <div class="weui-media-box__desc">
              <span v-show="insure.baseStatus=='1'">承保年龄:
                <span v-show="insure.minMonth!=null&&insure.minMonth>0">{{insure.minMonth}}个月</span>
                <span v-show="insure.minMonth==0||insure.minMonth==null">{{insure.minAge}}&nbsp</span>-&nbsp{{insure.maxAge}}周岁&nbsp</span>保障期限:{{insure.maxDeadLine}}天</div>
            <p class="common__card--leftspan common__color--DefaultTheme ">¥{{insure.minPrice}}
              <span v-show="insure.isQuota==0" class="common__smallsize">起</span>
            </p>
          </div>
        </div>
      </div>
    </div>
    <grid v-show="listType" :cols="2" style="background-color: #fff;" class="color-white common__activity--grid">
      <grid-item v-for="(insure, index) in hotInsuList" @click.native="goDetails(insure)" :key="index" :class="getIndexStyle(index)">
        <card>
          <img slot="header" class="common__card--img" :src="insure.imgUrl">
          <div slot="content" class="card-padding">

            <span class="common__card--leftspan">{{insure.productCname}}</span>
            <span class="common__card--rightspan">¥{{insure.minPrice}}
              <span style="font-size: 11px;" v-show="insure.isQuota==0">起</span>
            </span>
            <p class="common__card--p">
              {{insure.descrition}}
            </p>
          </div>
        </card>
      </grid-item>
    </grid>
  </div>
</template>

<script>
import indexService from "src/components/index/indexService";
import { RequestUrl } from "src/common/url";
import Menu from 'src/js/menu';
import { FooterIndex, RouteUrl, Mutations, PopState, TO_TYPE, WE_CHAT, Url_Key } from "src/common/const";
import { XHeader, Swiper, Group, GroupTitle, SwiperItem, Grid, GridItem, Card, Cell, XButton, Panel } from "vux";
import { mapState, mapActions } from "vuex";
import WeChatOauth from "src/js/weChat/weChatOauth"; //引入微信授权js
import SharePage from "src/js/sharePage"; //引入微信分享js
export default {
  computed: mapState(["hotInsuList", "indexMenuList", "adList", "colorRiskTyle", "user", "saveInsure", "shareUuid", "detailsStore", "isWeChar", "isWeAuth", "isQueryAd", "seleValue"]),
  components: { Group, Swiper, GroupTitle, SwiperItem, Grid, GridItem, Card, XHeader, Cell, indexService },
  data() {
    return {
      isCh: true,
      RouteUrl: {},
      showMore: false,
      swiperIndex: 0,
      listType: true,
    };
  },
  watch: {
    adList(cur, old) { }
  },
  filters: {

  },
  methods: {
    getIndexStyle(index) {
      if (index % 2 == 0) {
        return "common_car--griditem-left index__card";
      } else {
        return "common_car--griditem-right index__card";
      }
    },
    setListType() {
      this.listType = !this.listType;
      localStorage["LIST_TYPE"] = this.listType;
    },
    ...mapActions(["updatedPopState"]),
    // getQueryString(name) {
    //   var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    //   var r = window.location.search.substr(1).match(reg);
    //   if (r != null) return unescape(r[2]); return null;
    // },
    onIndexChange() {
      let menu = this.adList[this.swiperIndex];
      let queryMenu = {
        _this: this,
        menu: {
          toType: menu.toType,
          serviceUrl: menu.toUrl,
          serviceCname: menu.title,
          detail: menu.detail,
          productId: menu.productId
        },
        shareId: this.shareUuid,
        isLogin: this.user.isLogin
      }
      this.updatedPopState(PopState.VUX_POP_IN);
      Menu.goMenu(queryMenu);

      // let queryId = {
      //   TYPE: "FORM",
      //   id: menu.id
      // };
      // let _this = this;
      // _this.$http.post(RequestUrl.FIND_ADVERT_ID, queryId).then(function(res) {
      //   let queryMenu = {
      //     _this: _this,
      //     menu: {
      //       toType: menu.toType,
      //       serviceUrl: menu.toUrl,
      //       serviceCname: menu.title,
      //       detail: res.detail
      //     }
      //   }
      //   _this.updatedPopState(PopState.VUX_POP_IN);
      //   Menu.goMenu(queryMenu);
      // });
      // let _this = this;
      // if (menu.toType == TO_TYPE.INSIDE_JUMP) {
      //   _this.$common.goUrl(_this, menu.toUrl);
      // } else if (menu.toType == TO_TYPE.EXTERNAL_JUMP) {
      //   let iframe = {
      //     isIframe: true,
      //     iframeUrl: menu.toUrl,
      //     iframeName: menu.serviceCname
      //   };
      //   _this.$store.commit(Mutations.FOOTER_SHOW, FooterShow.FALSE);
      //   _this.$store.commit(Mutations.SET_IFRAME_DATA, iframe);
      // } else if (menu.toType == TO_TYPE.PHONE_NUMBER) {
      //   window.location.href = "tel:" + menu.toUrl;
      // }
    },
    gotoMenu(type) {
      this.updatedPopState(PopState.VUX_POP_IN);
      if (type == "service") {
        this.$common.goUrl(this, RouteUrl.SERVICE);
      } else {
        this.$common.goUrl(this, RouteUrl.INSURANCE);
      }
    },
    goMenu(menu) {
      let data = {
        _this: this,
        menu: menu,
      };
      Menu.goMenu(data);
    },
    goDetails(insure) {
      let curInsure = {
        riskCode: insure.riskCode,
        indexInsure: insure
      };
      //保存产品信息
      this.$common.storeCommit(this, Mutations.INSURE_DATA_INDEX_DATA, curInsure);


      let parmList = [];

      let urlPro = {
        key: Url_Key.PRODUCT_ID,
        value: this.saveInsure.indexData.id
      }
      parmList.push(urlPro);

      localStorage["IS_SHOP_DETAIL"] = "F";
      if (insure.isCar != "1") {
        //组合URI并跳转
        this.$common.goUrl(this, RouteUrl.DETAILS, this.$common.setShareUrl(parmList));
      } else {
        this.$common.goUrl(this, RouteUrl.CAR_INSURE, this.$common.setShareUrl(parmList));
      }
    },
    //初始化分享信息
    initShare() {
      //分享地址初始化
      // let urlParm = {
      //   isLogin: this.user.isLogin,
      //   userDto: this.user.userDto
      // };
      // let urlParm = {
      //   shareId: this.shareUuid
      // };
      // // let shareUrl = window.location.href + this.$common.getShareIndexUrl(urlParm);

      // let shareUrl = RequestUrl.BASE_URL + RouteUrl.INDEX + this.$common.getShareIndexUrl(this, urlParm);
      if (this.user.isLogin) {
        let uuid = this.$encode.hex_md5(this.user.userDto.userCode + ":1");
        this.$common.storeCommit(this, Mutations.SET_SHARE_UUID, uuid);
      }
      sessionStorage["SHARE_COMMON_TYPE"] = "USER";
      let parmList = [];
      let urlParm = {
        key: Url_Key.SHARE_UUID,
        value: this.shareUuid
      }
      parmList.push(urlParm);
      let shareUrl = RequestUrl.BASE_URL + RouteUrl.INDEX + this.$common.setShareUrl(parmList);
      //微信分享初始数据
      let weChatData = {
        _this: this,
        shareData: {
          title: "恒华出行宝",
          desc: WE_CHAT.shareDesc_Indexs,
          imgUrl: RequestUrl.WEB_PATH + "sticcxb/upload/assets/x3/logo.jpg",
          url: shareUrl,
          _this: this,
          type: 1
        }
      };
      // 微信分享
      SharePage.weChatShare(weChatData);
    },
    riskCodeColor(code) {
      if (typeof code != "undefined") {
        let riskCodeStyle = "border-color:" + this.colorRiskTyle[code].color + ";color:" + this.colorRiskTyle[code].color;
        return riskCodeStyle;
      } else {
        return "";
      }
    },
  },
  beforeRouteEnter(to, from, next) {
    localStorage["UUID_REF_URL"] = from.path;
    next();
  },
  beforeDestroy() {
    this.$common.storeCommit(this, Mutations.IS_SHOW_ROUTE_RED, false);
  },
  mounted() {
    let _this = this;
    _this.$common.storeCommit(_this, Mutations.IS_SHOW_ROUTE_RED, true);
    sessionStorage["DETAILS_FORM_URL"] = RouteUrl.INSURANCE;
    // if (!this.isQueryAd) {
    //   _this.$common.storeCommit(_this, Mutations.ADVERT_INIT, _this);
    // }

    // let msgComData = {
    //   title: "订单提交成功",
    //   content: "你的订单正在进行审核<br>工作人员会在一个工作日内与你联系<br>请保持电话通畅",
    //   alertBtn: "查看保单",
    //   alertBtnUrl: "",
    //   backBtn: "回到首页",
    //   backBtnUrl: "",
    // };
    // _this.$common.storeCommit(_this, Mutations.IS_SHOW_MSG_COM_DATA, msgComData);

    // let test = "88050250071800001210008805085007180000127000";
    // for (let i = 0; i < 2; i++) {
    //   console.log(test.substring(i * 22, (i + 1) * 22));
    // }
    // let INTEGRAL_TYPE_LIST = [
    //   { key: "all", value: "全部" },
    //   { key: "in", value: "获取" },
    //   { key: "out", value: "扣减" },
    // ];
    // console.log(JSON.stringify(INTEGRAL_TYPE_LIST));

    // let test = {};
    // test['荣威CSA7150ACV轿车']
    // let test = [];
    // let test1 = {
    //   inputType: "1",
    //   key: "宠物名字",
    //   isMust: true,
    //   default: "",
    //   imgUrl: "/sticcxb/upload/sftp/20171120112623.jpg",
    //   type: "4"
    // };
    // let test2 = {
    //   inputType: "1",
    //   key: "宠物性别",
    //   isMust: true,
    //   default: "",
    //   type: "4",
    //   imgUrl: "/sticcxb/upload/sftp/20171120112623.jpg",
    // };
    // test.push(test1);
    // test.push(test2);

    // console.log(JSON.stringify(test));
    //使用session便于每次进入时能正确判断是第一次。并非刷新操作
    // if (sessionStorage["WX_EVENT"] != "true" && _this.isWeChar) {
    //   if (_this.user.isLogin && _this.user.userDto.wxSubscribe == '1') {
    //     sessionStorage["WX_EVENT"] = "true";
    //     //店主则跳转到“我的”栏目
    //     _this.$common.goUrl(_this, RouteUrl.MY);
    //   }
    // }

    // window.location.href = 'http://intranet.licl.com.cn/zh/';
    // let test = {
    //   aa: "1"
    // }
    // let test = this.$encode.hex_md5("WX00001129:1");
    // debugger
    // alert(typeof (test) == "object");
    // alert(sessionStorage["TEST_TEST_TEST_TEST1"]);
    // let test1 = "2017-11-18 09:00";
    // let test2 = "2017-11-18 10:00";
    // let test3 = "2017-11-18 12:00";
    // if (test1 < test2) {
    //   alert(1);
    // }
    // if (test2 < test3) {
    //   alert(1);
    // }
    // this.initShare();
    // let test = "https://uat-lm.libertymutual.com.cn/sticcxb/#/sticcxb/details?=91%2Fe6c518b0373c6e4f1ab89777245802fbe20f%2FP%3D";
    // let testarray = test.split('?');
    // let test1 = "https://uat-lm.libertymutual.com.cn/sticcxb/#/sticcxb/details";
    // let testarray1 = test1.split('?');
    // this.getQueryString("type");
    // let test = this.getUrlKey("type");
    // _this.$common.setUuid(_this);

    // let aa = "8805081100170000147000";
    // let test =aa.substring(2,4);
    // let test2 = aa.substring(6,8);

    // if (typeof (WeixinJSBridge) == "undefined") {
    //   document.addEventListener("WeixinJSBridgeReady", function(e) {
    //     setTimeout(function() {
    //       WeixinJSBridge.invoke('setFontSizeCallback', { "fontSize": 0 }, function(res) {
    //         // alert(JSON.stringify(res));  
    //       });
    //     }, 0);
    //   });
    // } else {
    //   setTimeout(function() {
    //     WeixinJSBridge.invoke('setFontSizeCallback', { "fontSize": 0 }, function(res) {
    //       // alert(JSON.stringify(res));  
    //     });
    //   }, 0);
    // }
    // let test = this.$route.path;
    // alert(test);

    // let parm = {
    //   documentNo: "9127265010180000081000",
    //   TYPE: "FORM"
    // }
    // this.$http.post(RequestUrl.CALL_BACK_URL, parm)
    //   .then(function (res) {
    //   })

    // let test = {
    //   TYPE: "FORM",
    //   policyNo: "9127265010180000074000"
    // }

    // this.$http.post(RequestUrl.QUERY_DETAIL, test)
    //   .then(function (res) {
    //   })

    // let timestamp = new Date("2017/1/1");
    // let test = timestamp.getTime();
    // let test = "8805081100170000125000";
    // let test1 = test.substring(2,6);
    // _this.$common.downloadfile("https://einvoicelink.51fapiao.cn:8181/FPFX/actions/91052e887f4c81ef13d0d3d62068c4b78751b9", "电子发票", _this);

    localStorage["ACTIVITY_BACK_URL"] = RouteUrl.INDEX;
    document.title = '恒华出行宝';
    $("html,body").animate({ scrollTop: "0px" }, 10);
    this.isCh = this.$common.getIsCh(this);
    this.RouteUrl = RouteUrl;
    this.$init.indexInit(this, FooterIndex.INDEX);

    setTimeout(function () {
      if (!_this.user.isLogin) {
        //微信授权
        WeChatOauth.weChatOauth(_this, false, WE_CHAT.OAUTH_TYPE_DEFAULT);
      }
    }, 1);
    //初始化分享信息
    this.initShare();
  }
};
</script>

<style lang="scss" scoped >
.badge-value {
  font-size: 12px !important;
}

.index {
  background-color: #f0f0f0;
  a:link {
    background-color: #fff !important;
  }
  a:visited {
    background-color: #fff !important;
  }
  a:hover {
    background-color: #fff !important;
  }
  a:active {
    background-color: #fff !important;
  }
}

.index__menu {
  padding-bottom: 12px;
  background-color: #fff;
}

.index__menu--gridIteam {
  padding: 14.5px 0px 0px 0px !important;
  div {
    font-size: 13px;
  }
}

.index__menu {
  .weui-grid {
    height: 80.5px !important;
  }
}

.weui-grid:before {
  border: 0px !important;
}

.weui-grids:before {
  border: 0px !important;
}

.weui-grid:after {
  border: 0px !important;
}

a:link {
  text-decoration: none;
  color: #fff;
}

a:visited,
a:active,
a:linked {
  text-decoration: none;
  color: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.index__insurance_title {
  float: left;
  width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.index__insurance {
  font-size: 12px;
  padding: 1px 2px;
  border: 2px solid;
  float: right;
  border-radius: 5px;
}

.index__list--title {
  font-size: 15px;
}

.weui-panel {
  margin-top: 0px !important;
}

.index__footer {
  margin-bottom: 20px;
}

.weui-media-box__hd {
  width: 120px !important;
  height: 90px !important;
}

.weui-media-box__bd {
  height: 90px !important;
}

.weui-media-box__title {
  color: #000;
  font-size: 15px !important;
}

.weui-media-box__desc {
  margin-top: 0px !important;
  line-height: 1.5 !important;
  font-size: 12px !important;
  color: #666666 !important;
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.classroom__list--footer {
  margin-top: 6px !important;
  font-size: 10px;
  color: #b2b2b2;
}
</style>
